<template>
  <div full-screen width="1920" style="overflow: hidden" class="home-main" height="1080">
    <div class="home-con">
      <div class="home-head">
        <div class="headTitle" />
        <div class="headTime">
          <span class="headPage1 "><span>首页</span></span>
          <span class="headPage1 headPage2" @click="changePage('/prediction/index')">经济活力发展趋势回溯</span>
          <span class="headPage1 headPage2" @click="changePage('/trumpet/index')">一带一路国家投资风险指数</span>
          <p class="headPage3">
            {{ newTime }}
          </p>
        </div>
        <!--        <span class="headPage">-->
        <!--          <span class="headPage1">首页</span>-->
        <!--          <span class="headPage2">经济指标</span>-->
        <!--          <span class="headPage2">分析报表</span>-->
        <!--          <span class="headPage2">预警设置</span>-->
        <!--          <span class="headPage2">帮助</span>-->
        <!--        </span>-->
        <!--        <p style="text-align: right;font-size: 24px;color: #FFFFFF;margin-right: 10px">21231331</p>-->
      </div>
      <div class="p-win">
        <div class="home-left">
          <div class="home-chat1">
            <div class="home-chat-title">
              经济活力指数
              <el-popover
                placement="top-start"
                title="经济活力指数"
                width="200"
                trigger="hover"
                content="以2019年第一季度经济发展状况为基础指数100，表现合肥市各个季度的整体经济发展趋势。"
              >
                <el-button slot="reference" size="normal" style="background: transparent;border:none;margin-left: -16px " icon="el-icon-warning" />
              </el-popover>
              <el-date-picker
                v-model="value1"
                type="year"
                value-format="yyyy"
                :popper-class="'custom-date-picker-popup'"
                @change="handleYearChange1"
              />
            </div>
            <div class="home-chat-box">
              <line-bar-chart v-if="dayData.data.lineData.length>0" ref="saleChart" :chart-data="dayData" />
            </div>
          </div>
          <div class="home-chat">
            <p class="home-chat-title">
              消费零售活力指数
              <el-popover
                placement="top-start"
                title="消费零售活力指数"
                width="200"
                trigger="hover"
                content="以2019年第一季度消费品零售状况为基础指数100，表现合肥市商业，零售业的经济效益及发展趋势。"
              >
                <el-button slot="reference" size="normal" style="background: transparent;border:none;margin-left: -16px " icon="el-icon-warning" />
              </el-popover>
              <el-date-picker
                v-model="value2"
                type="year"
                value-format="yyyy"
                :popper-class="'custom-date-picker-popup'"
                @change="handleYearChange2"
              />
            </p>
            <div class="home-chat-box">
              <line-bar-chart v-if="dayData2.data.lineData.length>0" ref="saleChart" :chart-data="dayData2" />
            </div>
          </div>
          <div class="home-chat">
            <p class="home-chat-title">
              服务业活力指数
              <el-popover
                placement="top-start"
                title="服务业活力指数"
                width="200"
                trigger="hover"
                content="是综合评估服务业发展状况的关键指标，通过分析服务业中的交通运输、仓储贸易、商业零售、科创产业及配套服务等维度的活跃程度来衡量服务业在经济中的活跃程度和增长潜力。"
              >
                <el-button slot="reference" size="normal" style="background: transparent;border:none;margin-left: -16px " icon="el-icon-warning" />
              </el-popover>
            <!--            <span style="float: right ;margin-right: 10%">2024Q3</span>-->
            </p>
            <FourDetail :services-data="servicesData" />
          </div>
        </div>
        <div class="home-center" style="position: relative">
          <div class="home-cover">
            <div class="home-star" />
          </div>
          <div class="home-centerTitle">
            <div class="lineTitle" style="height: 42px;width: 100%;position: absolute;top: 25%;left: 66%;transform: translate(-50%, -50%);">
              <p style="color: #36C4FF;position: absolute">
                经济活力指数
              </p>
              <p style="color: #36C4FF;position: absolute;left: 38%">
                消费零售活力指数
              </p>
              <p
                style="color: #36C4FF;position: absolute;top: 30%;font-family: DIN;
            font-weight: bold;font-size: 24px;color: #FFFFFF"
              >
                188
              </p>
              <p
                style="color: #36C4FF;position: absolute;left:38%;top: 30%;font-family: DIN;
            font-weight: bold;font-size: 24px;color: #FFFFFF"
              >
                186
              </p>
            </div>
            <div class="lineTitle2" style="height: 42px;width: 100%;position: absolute;top: 42%;left: 66%;transform: translate(-50%, -50%);">
              <p style="color: #36C4FF;position: absolute">
                固定资产投资活力指数
              </p>
              <p style="color: #36C4FF;position: absolute;left: 38%">
                工业增长活力指数
              </p>
              <p
                style="color: #36C4FF;position: absolute;top: 30%;font-family: DIN;
            font-weight: bold;font-size: 24px;color: #FFFFFF"
              >
                208
              </p>
              <p
                style="color: #36C4FF;position: absolute;left:38%;top: 30%;font-family: DIN;
            font-weight: bold;font-size: 24px;color: #FFFFFF"
              >
                88
              </p>
            </div>
            <div class="lineTitle3" style="height: 42px;width: 100%;position: absolute;top: 60%;left: 66%;transform: translate(-50%, -50%);">
              <p style="color: #36C4FF;position: absolute">
                城际联动活力指数
              </p>
              <p style="color: #36C4FF;position: absolute;left: 38%">
                仓储贸易活力指数
              </p>
              <p
                style="color: #36C4FF;position: absolute;top: 30%;font-family: DIN;
            font-weight: bold;font-size: 24px;color: #FFFFFF"
              >
                101
              </p>
              <p
                style="color: #36C4FF;position: absolute;left:38%;top: 30%;font-family: DIN;
            font-weight: bold;font-size: 24px;color: #FFFFFF"
              >
                121
              </p>
            </div>
            <div class="lineTitle4" style="height: 42px;width: 100%;position: absolute;top: 78%;left: 66%;transform: translate(-50%, -50%);">
              <p style="color: #36C4FF;position: absolute">
                科创服务活力指数
              </p>
              <p style="color: #36C4FF;position: absolute;left: 38%">
                商业服务活力指数
              </p>
              <p
                style="color: #36C4FF;position: absolute;top: 38%;font-family: DIN;
            font-weight: bold;font-size: 24px;color: #FFFFFF"
              >
                115
              </p>
              <p
                style="color: #36C4FF;position: absolute;left:38%;top: 30%;font-family: DIN;
            font-weight: bold;font-size: 24px;color: #FFFFFF"
              >
                107
              </p>
            </div>
          </div>
          <div class="home-page1">
            <!--          <p>1000210幅</p>-->
            <p>{{ Number(configData[0]?configData[0].total:0).toLocaleString() }}幅</p>
            <p class="home-center-num">
              共入库卫星影像
            </p>
          </div>
          <div class="home-page2">
            <!--                    <p>602121幅</p>-->
            <p>{{ Number(configData[0]?configData[0].month:0).toLocaleString() }}幅</p>
            <p class="home-center-num">
              本月入库卫星影像
            </p>
          </div>
        </div>
        <div class="home-right">
          <div class="home-chat1">
            <p class="home-chat-title">
              工业增长活力指数
              <el-popover
                placement="top-start"
                title="工业增长活力指数"
                width="200"
                trigger="hover"
                content="以2019年第一季度工业制造业经济发展状况为基础指数100，表现合肥市各个季度的工业园区创新能力、经济效益和发展潜力的综合发展趋势。"
              >
                <el-button slot="reference" size="normal" style="background: transparent;border:none;margin-left: -16px " icon="el-icon-warning" />
              </el-popover>
              <el-date-picker
                v-model="value3"
                type="year"
                value-format="yyyy"
                :popper-class="'custom-date-picker-popup'"
                @change="handleYearChange3"
              />
            </p>
            <div class="home-chat-box">
              <line-bar-chart v-if="dayData3.data.lineData.length>0" ref="saleChart" :chart-data="dayData3" />
            </div>
          </div>
          <div class="home-chat">
            <p class="home-chat-title">
              固定资产投资活力指数
              <el-popover
                placement="top-start"
                title="固定资产活力指数"
                width="200"
                trigger="hover"
                content="以2019年第一季度固定资产投资状况为基础指数100，表现合肥市固定资产投资规模、结构和发展速度方面的综合发展趋势。"
              >
                <el-button slot="reference" size="normal" style="background: transparent;border:none;margin-left: -16px " icon="el-icon-warning" />
              </el-popover>
              <el-date-picker
                v-model="value4"
                value-format="yyyy"
                type="year"
                :disabled-date="disabledDate"
                :popper-class="'custom-date-picker-popup'"
                @change="handleYearChange4"
              />
            </p>
            <div class="home-chat-box">
              <line-bar-chart v-if="dayData4.data.lineData.length>0" ref="saleChart" :chart-data="dayData4" />
            </div>
          </div>
          <div class="home-chat">
            <p class="home-chat-title">
              资讯
            </p>
            <div class="unreadQsg">
              <div v-for="(item , index ) in newsList" :key="index" class="news_name">
                <div class="content">
                  <div class="title ">
                    {{ item.title }}
                  </div>
                  <p class="des">
                    {{ item.content }}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import LineBarChart from './LineBarChart.vue'
import FourDetail from './FourDatail.vue'
import {
  getConfigs,
  getServices,
  getEconomicVitality,
  getIndustrialIndex,
  getConsumerRetail,
  getFixedAssets,
  getTarget
} from '@/api/components'
import { number } from 'echarts/src/export'

export default {
  components: { LineBarChart, FourDetail },
  data() {
    return {
      newTime: '',
      yearValue: '',
      showInfo: false,
      timer: null,
      value1: '2024',
      value2: '2024',
      value3: '2024',
      value4: '2024',
      animate: false,
      configData: [],
      servicesData: { },
      economicVitalityData: [],
      predictedTrend: 'up',
      newsList: [
        // { title: ' 合肥经济稳中向好、长期向好的发展态势不会改变',
        //   description: '合肥市GDP、固定资产投资总额、工业增加值增速、城际联动指数、科创及服务指数等指标均呈现出较好的发展态势，未来一段时间内，这些指标将呈现出持续增长的趋势。' +
        //     '但经济形势整体呈现温和增长、缓慢复苏态势，但面临的风险和阻力不断积聚，增长前景面临更大挑战但经济形势整体呈现温和增长、缓慢复苏态势，但面临的风险和阻力不断积聚，增长前景面临更大挑战\''
        // },
        // { title: ' 全国经济较好、且长期发展良好',
        //   description: '全国GDP、固定资产投资总额、工业增加值增速、城际联动指数、科创及服务指数等指标均呈现出较好的发展态。经济形势整体呈现温和增长、缓慢复苏态势，'
        // },
        // { title: ' 安徽省经济良好、长期向好的发展态势不会改变',
        //   description: '安徽省GDP、固定资产投资总额、工业增加值增速、城际联动指数、科创及服务指数等指标均呈现出较好的发展态。未来一段时间内，这些指标将呈现出持续增长的趋势。'
        // }
      ],
      dayData: {
        name: '当日竞价情况统计',
        data: {
          valueTime: this.value1,
          name: [],
          value: [],
          lineData: []
        }
      },
      dayData2: {
        name: '当日竞价情况统计',
        data: {
          valueTime: this.value2,
          name: [],
          value: [],
          lineData: []
        }
      },
      dayData3: {
        name: '当日竞价情况统计',
        data: {
          valueTime: this.value3,
          name: [],
          value: [],
          lineData: []
        }
      },
      dayData4: {
        name: '当日竞价情况统计',
        data: {
          valueTime: this.value4,
          name: [],
          value: [],
          lineData: []
        }
      }
      // mapData: {
      //   name: '当日竞价情况统计',
      //   data: {
      //     name: ['一季度', '二季度', '三季度', '四季度'],
      //     value: [11, 2, 20, 15],
      //     lineData: [11, 2, 20, 15]
      //   }
      // }
    }
  },
  computed: {
    number() {
      return number
    }
  },
  mounted() {
    this.scrollUp()
    this.getNowTime()
    this.fetchConfigs()
    // clearInterval(this.timer)
    this.timer = setInterval(() => {
      this.getNowTime()
    }, 1000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    changePage(path) {
      this.$router.push(path)
    },
    disabledDate(date) {
      const currentYear = new Date().getFullYear() // 获取当前年份
      return date.getFullYear() > currentYear // 如果选择的年份大于当前年份，则禁止选择
    },
    getNowTime() {
      const data = new Date()
      this.yearValue = data.getFullYear()
      this.newTime = data.getFullYear() + '-' + this.addzero((data.getMonth() + 1)) + '-' + this.addzero(data.getDate()) + '     ' + '' + '' + this.addzero(data.getHours()) + ':' + this.addzero(data.getMinutes()) + ':' + this.addzero(data.getSeconds())
    },
    addzero(s) {
      return s < 10 ? '0' + s : s
    },
    async handleYearChange1(value) {
      const response = await getEconomicVitality({
        year: value,
        city: 26
      }) // 调用 getEconomicVitality 接口
      this.value1 = value
      const data1 = response.data
      if (data1.length > 0) {
        const responseData = data1 // 假设接口返回的数据在 response3.data 中
        const name = responseData.map((item) => {
          if (item.is_predictive === 1) {
            return item.year + 'Q' + item.quarter + '(预)'
          } else {
            return item.year + 'Q' + item.quarter
          }
        })
        const value1 = responseData.map((item) => {
          return item.vitality_index
        })
        const lineData = responseData.map((item) => {
          return item.predictive_index
        })
        this.dayData.data.name = name
        this.dayData.data.value = value1
        this.dayData.data.valueTime = value
        this.dayData.data.lineData = lineData
      } else {
        this.dayData.data.name = []
        this.dayData.data.value = []
        this.dayData.data.lineData = []
      }
    },
    async handleYearChange2(value) {
      const response = await getConsumerRetail({
        year: value,
        city: 26
      }) // 调用 getConsumerRetail 接口
      this.value2 = value
      const data1 = response.data
      if (data1.length > 0) {
        const responseData = data1 // 假设接口返回的数据在 response3.data 中
        const name = responseData.map((item) => {
          if (item.is_predictive === 1) {
            return item.year + 'Q' + item.quarter + '(预)'
          } else {
            return item.year + 'Q' + item.quarter
          }
        })
        const value1 = responseData.map((item) => {
          return item.vitality_index
        })
        const lineData = responseData.map((item) => {
          return item.predictive_index
        })
        this.dayData2.data.name = name
        this.dayData2.data.value = value1
        this.dayData2.data.valueTime = value
        this.dayData2.data.lineData = lineData
      } else {
        this.dayData2.data.name = []
        this.dayData2.data.value = []
        this.dayData2.data.lineData = []
      }
    },
    async handleYearChange3(value) {
      const response = await getIndustrialIndex({
        year: value,
        city: 26
      }) // 调用 getIndustrialIndex 接口
      this.value3 = value
      const data1 = response.data
      if (data1.length > 0) {
        const responseData = data1 // 假设接口返回的数据在 response3.data 中
        const name = responseData.map((item) => {
          if (item.is_predictive === 1) {
            return item.year + 'Q' + item.quarter + '(预)'
          } else {
            return item.year + 'Q' + item.quarter
          }
        })
        const value1 = responseData.map((item) => {
          return item.vitality_index
        })
        const lineData = responseData.map((item) => {
          return item.predictive_index
        })
        this.dayData3.data.name = name
        this.dayData3.data.value = value1
        this.dayData3.data.valueTime = value
        this.dayData3.data.lineData = lineData
      } else {
        this.dayData3.data.name = []
        this.dayData3.data.value = []
        this.dayData3.data.lineData = []
      }
    },
    async handleYearChange4(value) {
      const response = await getFixedAssets({
        year: value,
        city: 26
      }) // 调用 getFixedAssets 接口
      this.value4 = value
      const data1 = response.data
      if (data1.length > 0) {
        const responseData = data1 // 假设接口返回的数据在 response3.data 中
        const name = responseData.map((item) => {
          if (item.is_predictive === 1) {
            return item.year + 'Q' + item.quarter + '(预)'
          } else {
            return item.year + 'Q' + item.quarter
          }
        })
        const value1 = responseData.map((item) => {
          return item.vitality_index
        })
        const lineData = responseData.map((item) => {
          return item.predictive_index
        })
        this.dayData4.data.name = name
        this.dayData4.data.value = value1
        this.dayData4.data.valueTime = value
        this.dayData4.data.lineData = lineData
      } else {
        this.dayData4.data.name = []
        this.dayData4.data.value = []
        this.dayData4.data.lineData = []
      }
    },
    scrollUp() {
      this.timer = setInterval(() => {
        this.animate = true
        setTimeout(() => {
          this.newsList.push((this.newsList[0]))
          this.newsList.shift()
          this.animate = false
        }, 500)
      }, 3000)
    },
    async fetchConfigs() {
      const response = await getConfigs() // 调用 getConfigs 接口
      const response2 = await getServices() // 调用 getServices 接口
      const response3 = await getTarget() // 调用 getTarget 接口

      this.configData = response.data // 假设接口返回的数据在 response.data 中
      this.servicesData = response2.data // 假设接口返回的数据在 response2.data 中
      this.newsList = response3.data // 假设接口返回的数据在 response3.data 中

      await this.handleEconomicVitalityData() // 处理经济活力数据
      await this.handleConsumerRetailData() // 处理消费零售活力数据
      await this.handleIndustrialIndexData() // 处理消费零售活力数据
      await this.handleFixedAssetsData() // 处理固定资产投资活力数据
    },
    /** ***** 处理经济活力数据  ****/
    async handleEconomicVitalityData() {
      const { data } = await getEconomicVitality({
        year: '2024',
        city: 26
      }) // 调用 getEconomicVitality 接口
      const responseData = data // 假设接口返回的数据在 response3.data 中
      const name = responseData.map((item) => {
        if (item.is_predictive === 1) {
          return item.year + 'Q' + item.quarter + '(预)'
        } else {
          return item.year + 'Q' + item.quarter
        }
      })
      const value = responseData.map((item) => {
        return item.vitality_index
      })
      const lineData = responseData.map((item) => {
        return item.predictive_index
      })

      this.dayData.data.name = name
      this.dayData.data.value = value
      this.dayData.data.valueTime = '2024'
      this.dayData.data.lineData = lineData
      console.log(this.dayData)
    },
    /** ***** 处理消费零售活力数据  ****/
    async handleConsumerRetailData() {
      const { data } = await getConsumerRetail({
        year: '2024',
        city: 26
      }) // 调用 getConsumerRetail 接口
      const responseData = data // 假设接口返回的数据在 response3.data 中
      const name = responseData.map((item) => {
        if (item.is_predictive === 1) {
          return item.year + 'Q' + item.quarter + '(预)'
        } else {
          return item.year + 'Q' + item.quarter
        }
      })
      const value = responseData.map((item) => {
        return item.vitality_index
      })
      const lineData = responseData.map((item) => {
        return item.predictive_index
      })

      this.dayData2.data.name = name
      this.dayData2.data.value = value
      this.dayData2.data.valueTime = '2024'
      this.dayData2.data.lineData = lineData
    },
    /** ***** 处理工业智造活力数据  ****/
    async handleIndustrialIndexData() {
      const { data } = await getIndustrialIndex({
        year: '2024',
        city: 26
      }) // 调用 getConsumerRetail 接口
      const responseData = data // 假设接口返回的数据在 response3.data 中
      const name = responseData.map((item) => {
        if (item.is_predictive === 1) {
          return item.year + 'Q' + item.quarter + '(预)'
        } else {
          return item.year + 'Q' + item.quarter
        }
      })
      const value = responseData.map((item) => {
        return item.vitality_index
      })
      const lineData = responseData.map((item) => {
        return item.predictive_index
      })

      this.dayData3.data.name = name
      this.dayData3.data.value = value
      this.dayData3.data.valueTime = '2024'
      this.dayData3.data.lineData = lineData
    },
    /** ***** 处理固定资产活力数据  ****/
    async handleFixedAssetsData() {
      const { data } = await getFixedAssets({
        year: '2024',
        city: 26
      }) // 调用 getConsumerRetail 接口
      const responseData = data // 假设接口返回的数据在 response3.data 中
      const name = responseData.map((item) => {
        if (item.is_predictive === 1) {
          return item.year + 'Q' + item.quarter + '(预)'
        } else {
          return item.year + 'Q' + item.quarter
        }
      })
      const value = responseData.map((item) => {
        return item.vitality_index
      })
      const lineData = responseData.map((item) => {
        return item.predictive_index
      })

      this.dayData4.data.name = name
      this.dayData4.data.value = value
      this.dayData4.data.valueTime = '2024'
      this.dayData4.data.lineData = lineData
    },
    updatexy(event) {
      this.x = event.clientX
      this.y = event.clientY
      this.showInfo = this.x > 590 && this.x < 680 && this.y > 270 && this.y < 380
    }
  }
}

</script>
<style lang="scss" scoped>
.home-main{
  background: url("~@/assets/images/bg.png") no-repeat;
  background-size: cover;
}
.home-con{
  min-width: 1280px;
  min-height: 720px;
}
.home-head{
  background: url("~@/assets/images/head.png") no-repeat;
  background-size: 100%;
  height: 110px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}
.headTitle{
  height: 50%;
  left: 50%;
  margin-top: 20px;
  margin-left: 40%;
  width: 20%;
  background: url("~@/assets/images/headtitle.png") no-repeat;
  background-size: 100%;
}
.headPage{
  margin-left: 2%;
  width: 25%;
  display: flex;
  justify-content: space-between;
  background-size: 100%;
}
.headTime{
  width: 98%;
  display: flex;
  justify-content: space-between;
  background-size: 100%;
  span{
    cursor: pointer;
  }
}
.headPage1{
  display: inline-block;
  cursor: pointer;
  font-weight: 400;
  font-size: 16px;
  color: #FFFFFF;
  text-align: center;
  height: 40px;
  background: url("~@/assets/images/pageyellow.png") no-repeat center;
  background-size: 100% 40px;
  span{
    word-break: keep-all;
    display: inline-block;
    padding: 0 30px;
  }
}
.headPage2{
  background: url("~@/assets/images/pageblue.png") no-repeat;
  background-size: 100% 40px;
}
.headPage3{
  float: right;
  font-family: HYLingXinJ, sans-serif;
  font-weight: 400;
  font-size: 18px;
  color: #D3DDE8;
  margin-left: 64%;
  text-align: center;
}
.p-win{
  display: flex;
  justify-content: space-between;
  padding: 10px 24px 30px 24px;
  width: 100%;
  height: 925px;
}
.home-left{
  margin-top: 110px;
  margin-left: 24px;
  width: 25%;
  height: 90%;
}
.home-chat{
  width: 460px;
  height: 260px !important;
  margin-top: 20px;
  background: url("~@/assets/images/boxslider.png") no-repeat;
  background-size: 95%;
}
.home-chat1{
  width: 460px;
  height: 260px !important;
  background: url("~@/assets/images/boxslider.png") no-repeat;
  background-size: 95%;
}
.home-chat-title{
  font-weight: 400;
  font-size: 18px;
  color: #FFFFFF;
  line-height: 40px;
  margin-left: 40px;
  font-family: HYLingXinJ, sans-serif;
}
.home-center{
  margin-top: 20px;
  width: 50%;
  background: url("~@/assets/images/anhui.png") no-repeat;
  background-size: 95%;
}
.home-cover{
  width: 180px;
  height: 210px;
  position: absolute;
  left: 40%;
  top: 41%;
  opacity: 1;
  cursor: pointer;
}
.home-cover:hover+.home-centerTitle{
  display: block;
}
.home-centerTitle:hover{
  display: block;
}
.home-centerTitle{
  display: none;
  width: 375px;
  height: 373px;
  top: 10%;
  left: 30%;
  position: absolute;
  background: url("~@/assets/images/centerTitle.png") no-repeat center center;
  background-size: 100%             ;
}
.home-star{
  width: 46px;
  height: 54px;
  top: 40%;
  left: 40%;
  position: absolute;
  background: url("~@/assets/images/star.png") no-repeat;
  background-size: 100%;
}
.home-page1{
  font-family: DIN;
  font-weight: bold;
  font-size: 0.125rem;
  color: #FFFFFF;
  line-height: 0.17708rem;
  top: 90%;
  left: 30%;
  position: absolute;
}
.home-center-num{
  font-family: Qicrosoft YaHei;
  font-weight: 400;
  font-size: 16px;
  color: #36C4FF;
  text-align: center;
  line-height: 60px;
}
.home-page2{
  font-family: DIN;
  font-weight: bold;
  font-size: 0.125rem;
  color: #FFFFFF;
  line-height: 0.17708rem;
  top: 90%;
  left: 60%;
  position: absolute;
}
.home-right{
  margin-top: 110px;
  width: 25%;
  height: 90%;
}

.home-center-title{
  text-align: center;
  margin-top: 10px;
  font-weight: bold;
  font-size: 16px;
  color: #FFFFFF;
  line-height: 26px;
}
.home-center-text{
  font-weight: 400;
  font-size: 14px;
  color: #FFFFFF;
  text-align: center;
  width: 80%;
  margin-left: 36px;
  line-height: 24px;
}
.unreadQsg {
  max-height: 200px;
  overflow: hidden;
  right: 0;
  top: 0;
  bottom: auto;
  margin-inline-end: 24px;
  .news_name {
    line-height: 30px;
    transition: top 0.5s;
    transition-delay: 5s;
    position: relative;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    .content {
      position: relative;
      margin-bottom: 10px;
      margin-inline-start: auto;
      padding: 10px 30px;
      min-height: 60px;
      overflow: hidden;
      display: -webkit-box;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 6;
      border-radius: 8px;
      .title {
        text-align: center;
        padding-right: 12px;
        margin-bottom: 8px;
        font-family: Qicrosoft YaHei;
        font-weight: bold;
        font-size: 16px;
        color: #FFFFFF;
        line-height: 26px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .des {
        word-break: break-all;
        cursor: pointer;
        height: 80px;
        overflow: hidden;
        font-family: Qicrosoft YaHei;
        font-weight: 400;
        font-size: 14px;
        color: #FFFFFF;
        opacity: 0.5;
        display: -webkit-box;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 6 !important;
      }
    }
  }
}
.anim {
  transition: all 2s;
  margin-top: -110px;
}
::v-deep.el-cascader,.el-date-editor.el-input, .el-date-editor.el-input__inner{
  width: 30% !important;
  float: right;
  margin-right: 10%;
}
::v-deep .el-date-picker ,.el-popper .custom-date-picker-popup {
  background: aliceblue;
}
::v-deep .el-input__inner {
  background-color: transparent !important;
  border-color:#80ffff;
  box-shadow: 1px 1px 5px 1px  RGB(128,255,255,0.8) inset;
  height: 30px;
  font-size: 14px;
  color: #FFFFFF;
}
.home-chat-box{
  height: calc(100% - 40px);
}
</style>

